<script setup>
defineOptions({
  name: 'DefaultLayout',
});
import Header from '@/layouts/Header/index.vue';
import SidebarMenu from '@/layouts/Sidebar/index.vue';
import YBreadcrumb from '@/layouts/Breadcrumb/index.vue';
import Settings from '@/layouts/Header/com/Settings.vue';
import ThemeSwitch from '@/layouts/Header/com/ThemeSwitch.vue';
import Fullscreen from '@/layouts/Header/com/Fullscreen.vue';
import Refresh from '@/layouts/Header/com/Refresh.vue';
import UserAvatar from '@/layouts/Header/com/UserAvatar.vue';
import YLogo from '@/layouts/Header/com/logo.vue';
import { useKeepAliveStore, useThemeStore } from '@/stores';
import { useRoute } from 'vue-router';
const route = useRoute();
const themeStore = useThemeStore();
const keepAliveStore = useKeepAliveStore();

const keepAliveNames = computed(() => {
  return keepAliveStore.keepAliveNames;
});

const isTopMenu = computed(() => {
  return themeStore.layoutSetting.layout === 'vertical';
});

const collapsed = computed(() => {
  return themeStore.layoutSetting.collapsed;
});
</script>
<template>
  <a-layout class="layout wh-full">
    <!-- 侧边导航 -->
    <a-layout-sider
      v-if="!isTopMenu"
      class="sider sider-horizontal"
      :class="{ collapsed: collapsed }"
      theme="dark"
      :trigger="null"
      :collapsed="collapsed"
    >
      <YLogo />
      <SidebarMenu class="sidebar-menu"></SidebarMenu>
    </a-layout-sider>
    <a-layout>
      <!-- 顶部区 -->
      <Header>
        <template #header-left>
          <!-- 顶部导航启用 -->
          <YLogo v-if="isTopMenu" />
          <!-- 侧边导航启用面包屑 -->
          <YBreadcrumb v-else />
        </template>
        <template #menu v-if="isTopMenu">
          <SidebarMenu class="sidebar-menu"></SidebarMenu>
        </template>
        <template #header-right>
          <a-space>
            <ThemeSwitch></ThemeSwitch>
            <Settings></Settings>
            <Fullscreen></Fullscreen>
            <Refresh></Refresh>
            <UserAvatar></UserAvatar>
          </a-space>
        </template>
      </Header>
      <!-- 内容区 -->
      <a-layout-content class="p-4">
        <div class="content-view rounded-4">
          <router-view v-slot="{ Component }">
            <template v-if="Component">
              <Suspense>
                <Transition name="fade-slide" mode="out-in" appear>
                  <keep-alive :include="keepAliveNames">
                    <component :is="Component" :key="route.fullPath" />
                  </keep-alive>
                </Transition>
                <template #fallback> 正在加载... </template>
              </Suspense>
            </template>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped></style>
